React Navigation

基本となる概念

StackとかBottom Tabとか

code:ts

const state = {

// navigatorsの種類

type: 'stack',

// navigatorを一意に特定するkey

key: 'stack-1',

routes: [

{ key: 'home-1', name: 'Home', params: { sortBy: 'latest' } },

{ key: 'settings-1', name: 'Settings' },

],

index: 1,

stale: false,

};

関連

State Persistence

一番rootでwrapするComponent

Navigatorの大まかな構造

種類多すぎて忘れる

深い箇所でリロードすると、手前に戻るのがダルい

State Persistenceすればできる

2022/4/18現在experimentalだが、少なくとも開発中は使えるはず

Hooks

code:ts

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

useNavigationState

useFocusEffect

useIsFocused

useLinkProps

useLinkBuilder

useScrollToTop

useTheme

NavigationContainer

onStateChange

現在のroutingのstateを確認できる

safe area

ios Xのヘッダーらへんのスペースを保つかどうか

page name

code:ts